<template>
  <div class="personBox">
    <p class="personalTitle">{{personalTitle}}<span class="clientStr">{{transportStr}}</span></p>
    <div class="contentBox">
      <div class="contentLeft">
        <p class="workBlock">{{workBlock}}</p>
        <el-table
            :data="tableData"
            style="width: 75%"
            height="96">
          <el-table-column
              prop="Inquiry"
              label="待处理询价单"
              width="111">
          </el-table-column>
          <el-table-column
              prop="pendingOrder"
              label="待处理订单"
              width="101">
          </el-table-column>
          <el-table-column
              prop="unconfirmed"
              label="待确认回单"
              width="101">
          </el-table-column>
          <el-table-column
              prop="unsettled"
              label="待处理结算单"
              width="120">
          </el-table-column>
          <el-table-column
              prop="track"
              label="在途跟踪"
              width="101">
          </el-table-column>
          <el-table-column
              prop="abnormal"
              label="异常订单"
              width="101">
          </el-table-column>
          <el-table-column
              prop="contract"
              label="待确认合同"
              width="101">
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="contentBox2">
      <p class="workBlock">{{trackStr}}</p>
      <div class="filter">
        <el-select class="inputCont" v-model="trackValue"
                   filterable
                   size="mini"
                   placeholder="请选择">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        <el-input size="mini" class="inputCont" v-model="trackInput" placeholder="请输入内容"></el-input>
        <el-button size="mini" icon="el-icon-search" circle></el-button>
      </div>
      <div class="trackResult">
        <el-table
            :data="trackData"
            style="width: 100%">
          <el-table-column
              prop="dingdanhao"
              label="订单号"
              width="100"
          >
          </el-table-column>
          <el-table-column
              prop="yundanhao"
              label="运单号"
              width="100">
          </el-table-column>
          <el-table-column
              prop="yujifache"
              label="预计发车时间"
              width="120">
          </el-table-column>
          <el-table-column
              prop="shijifache"
              label="实际发车时间"
              width="120">
          </el-table-column>
          <el-table-column
              prop="yujidaoda"
              label="预计到达时间"
              width="120">
          </el-table-column>
          <el-table-column
              prop="shouhuoren"
              label="收货人"
              width="100">
          </el-table-column>
          <el-table-column
              prop="shifadi"
              label="始发地"
              width="80">
          </el-table-column>
          <el-table-column
              prop="mudidi"
              label="目的地"
              width="80">
          </el-table-column>
          <el-table-column
              prop="xiezi"
              label="货物"
              width="80">
          </el-table-column>
          <el-table-column
              prop="zhongliang"
              label="重量"
              width="80">
          </el-table-column>
          <el-table-column
              prop="zhuangtai"
              label="状态"
              width="80">
          </el-table-column>
        </el-table>
        <el-pagination
            class="el-pagination"
            :page-sizes="[4, 10, 20, 30, 40]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="this.trackData.length">
        </el-pagination>
      </div>
    </div>
    <div class="contentBox2">
      <p class="workBlock">{{dataStatistics}}</p>
      <!--echarts图表-->
      <div style="width:990px;height:450px;background-color: white" ref="chart"></div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
const echarts = require("echarts")
export default {
  name: 'Home',
  data () {
    return {
      trackStr: "在途跟踪",
      dataStatistics: "数据统计",
      notice: "公告通知",
      workBlock: "工作看板",
      personalTitle: "万事达-TMS",
      transportStr: "运输端",
      trackInput: "",
      noticeData:[
        {
          contentTitle: "王宝强离婚啦",
          path: "https://www.sohu.com/a/222270656_100097123"
        },
        {
          contentTitle: "李小璐出轨啦",
          path: "https://www.bilibili.com/read/cv4317354/"
        },
      ],
      tableData: [{
        Inquiry: '1',
        pendingOrder: '2',
        unconfirmed: '3',
        unsettled: '4',
        track: "5",
        abnormal: "6",
        contract: "7"
      }],
      trackData: [{
        dingdanhao: '1534161',//订单号
        yundanhao: '2354342',//运单号
        yujifache: '2021/03/15',//预计发车时间
        shijifache: '2021/03/16',//实际发车时间
        yujidaoda: "2021/03/19",//预计到达时间
        shouhuoren: "钻石王老五",//收货人
        shifadi: "深圳",// 始发地
        mudidi: "成都",//目的地
        xiezi: "鞋子",//货物
        zhongliang: "10",//重量
        zhuangtai: "异常",//状态
      },
        {
          dingdanhao: '1534161',//订单号
          yundanhao: '2354342',//运单号
          yujifache: '2021/03/15',//预计发车时间
          shijifache: '2021/03/16',//实际发车时间
          yujidaoda: "2021/03/19",//预计到达时间
          shouhuoren: "钻石王老五",//收货人
          shifadi: "深圳",// 始发地
          mudidi: "成都",//目的地
          xiezi: "鞋子",//货物
          zhongliang: "10",//重量
          zhuangtai: "异常",//状态
        },
        {
          dingdanhao: '1534161',//订单号
          yundanhao: '2354342',//运单号
          yujifache: '2021/03/15',//预计发车时间
          shijifache: '2021/03/16',//实际发车时间
          yujidaoda: "2021/03/19",//预计到达时间
          shouhuoren: "钻石王老五",//收货人
          shifadi: "深圳",// 始发地
          mudidi: "成都",//目的地
          xiezi: "鞋子",//货物
          zhongliang: "10",//重量
          zhuangtai: "异常",//状态
        },
        {
          dingdanhao: '1534161',//订单号
          yundanhao: '2354342',//运单号
          yujifache: '2021/03/15',//预计发车时间
          shijifache: '2021/03/16',//实际发车时间
          yujidaoda: "2021/03/19",//预计到达时间
          shouhuoren: "钻石王老五",//收货人
          shifadi: "深圳",// 始发地
          mudidi: "成都",//目的地
          xiezi: "鞋子",//货物
          zhongliang: "10",//重量
          zhuangtai: "异常",//状态
        },
        {
          dingdanhao: '1534161',//订单号
          yundanhao: '2354342',//运单号
          yujifache: '2021/03/15',//预计发车时间
          shijifache: '2021/03/16',//实际发车时间
          yujidaoda: "2021/03/19",//预计到达时间
          shouhuoren: "钻石王老五",//收货人
          shifadi: "深圳",// 始发地
          mudidi: "成都",//目的地
          xiezi: "鞋子",//货物
          zhongliang: "10",//重量
          zhuangtai: "异常",//状态
        }
      ],
      options: [
        {
          value: 'shouhuoren',
          label: '收货人'
        }, {
          value: 'shifadi',
          label: '始发地'
        }, {
          value: 'mudidi',
          label: '目的地'
        }, {
          value: 'dingdanhao',
          label: '订单号'
        }, {
          value: 'yundanhao',
          label: '运单号'
        },{
          value: 'huoming',
          label: '货名'
        }],
      trackValue: '',
    }
  },
  components: {
  },
  methods: {
    drawEchart() {
      let myChart = echarts.init(this.$refs.chart);
      // 绘制图表
      myChart.setOption({
        legend: {},
        tooltip: {},
        dataset: {
          dimensions: ['product', 'order', 'unsettled', 'settled'],
          source: [
            {product: '1月', 'order': 43, 'unsettled': 65, 'settled': 43},
            {product: '2月', 'order': 53, 'unsettled': 62, 'settled': 42},
            {product: '3月', 'order': 45, 'unsettled': 24, 'settled': 63},
            {product: '4月', 'order': 73, 'unsettled': 35, 'settled': 33},
            {product: '5月', 'order': 33, 'unsettled': 27, 'settled': 43},
            {product: '6月', 'order': 63, 'unsettled': 12, 'settled': 52},
            {product: '7月', 'order': 42, 'unsettled': 62, 'settled': 33},
            {product: '8月', 'order': 73, 'unsettled': 77, 'settled': 43},
            {product: '9月', 'order': 56, 'unsettled': 75, 'settled': 43},
            {product: '10月', 'order': 47, 'unsettled': 45, 'settled': 43},
            {product: '11月', 'order': 13, 'unsettled': 58, 'settled': 33},
            {product: '12月', 'order': 42, 'unsettled': 77, 'settled': 73},
          ]
        },
        xAxis: {type: 'category'},
        yAxis: {
          name: "数量"
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {type: 'bar'},
          {type: 'bar'},
          {type: 'bar'}
        ]
      });
    }
  },
  mounted() {
    this.drawEchart();
  },
}
</script>

<style>
.clientStr {
  color: red;
  text-align: center;
}

.el-aside {
  text-align: center;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-menu {
  text-align: left;
}
div.el-submenu__title {
  height: 40px;
  line-height: 40px;
}
.el-submenu li.el-menu-item {
  height: 40px;
  line-height: 40px;
  min-width: 200px;
}
.personCenter {
  display: block;
  color: white;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
}
.personBox {
  width: 1000px;
}
.personalTitle {
  font-size: 18px;
  font-weight: bold;
  text-align: left !important;
  text-indent: 20px;
}
.workBlock {
  width: 100%;
  text-align: left !important;
  font-size: 18px;
  line-height: 30px;
  text-indent: 12px;
  margin: 0 !important;
}
.el-table .cell{
  text-align: center !important;
}
.contentRight li {
  list-style: none;
  font-size: 16px;
}
.filter {
  display: flex;
}

.filter .inputCont {
  margin-right: 10px;
  width: 140px !important;
  height: 30px !important;
}
.el-pagination {
  padding: 5px 5px !important;
}
</style>